<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>WD Golang程序性能分析工具</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>
  <body>
  
  
    <div class="container">
      <h1 class="text-center">WD Golang程序性能分析工具</h1>
    </div>
    
    <div class="container">
      <div class="row">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
        {{$line:="line"}}{{$ring:="ring"}}{{$colu:="colu"}}{{$cake:="cake"}}
        {{range .}}
        {{if eq .Kind $line}}
        <div class="col-sm-6">
          <h2 class="text-center">{{.Name}}</h2>
          <canvas id="{{.ID}}"></canvas>
        </div>
        <script>
            // Data for line charts
                            var lineChartData = {
                                labels: [{{range .Key}}"{{.}}",{{end}}],
                                datasets: [
                                {
                                    label: {{.Lable}},
                                    fill: false,
                                    lineTension: 0.1,
                                    backgroundColor: "rgba(75,192,192,0.4)",
                                    borderColor: "rgba(75,192,192,1)",
                                    borderCapStyle: 'butt',
                                    borderDash: [],
                                    borderDashOffset: 0.0,
                                    borderJoinStyle: 'miter',
                                    pointBorderColor: "rgba(75,192,192,1)",
                                    pointBackgroundColor: "#fff",
                                    pointBorderWidth: 1,
                                    pointHoverRadius: 5,
                                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                                    pointHoverBorderColor: "rgba(220,220,220,1)",
                                    pointHoverBorderWidth: 2,
                                    pointRadius: 1,
                                    pointHitRadius: 10,
                                    data: [{{range .Value}}{{.}},{{end}}],
                                    spanGaps: false,
                                }
                                ]
                            };
        
                            var ctx = document.getElementById("{{.ID}}").getContext("2d");
                            var LineChart = new Chart(ctx, {
                                type: 'line',
                                data: lineChartData,
                                responsive: true,
                                bezierCurve : false
                            });
        </script>
        {{else if eq .Kind $ring}}
        <div class="col-sm-6">
          <h2 class="text-center">{{.Name}}</h2>
          <canvas id="{{.ID}}"></canvas>
        </div>
        <script>
        var doughnutData = {
          labels: [{{range .Key}}"{{.}}",{{end}}],
          datasets: [
          {
              data: [{{range .Value}}{{.}},{{end}}],
              backgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56",
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
              ],
              hoverBackgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56",
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
              ]
          }]
      };

      var ctx = document.getElementById("{{.ID}}").getContext("2d");
      var DoughnutChart = new Chart(ctx, {
          type: 'doughnut',
          data: doughnutData,
          responsive : true
      });  
      </script> 
      {{else if eq .Kind $colu}}
      <div class="col-sm-6">
        <h2 class="text-center">{{.Name}}</h2>
        <canvas id="{{.ID}}"></canvas>
      </div>
      <script>
        // Bar Charts
        var barChartData = {
            labels: [{{range .Key}}"{{.}}",{{end}}],
            datasets: [
            {
                label: "{{.Lable}}",
                backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                data: [{{range .Value}}{{.}},{{end}}],
            }
            ]
        };
    
        var ctx = document.getElementById("{{.ID}}").getContext("2d");
        var BarChart = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            responsive : true
        });
      </script> 
      {{else if eq .Kind $cake}}
      <div class="col-sm-6">
        <h2 class="text-center">{{.Name}}</h2>
        <canvas id="{{.ID}}"></canvas>
      </div>
      <script>
                          var pieData = {
                            labels: [{{range .Key}}"{{.}}",{{end}}],
                            datasets: [
                            {
                                data: [{{range .Value}}{{.}},{{end}}],
                                backgroundColor: [
                                "#FF6384",
                                "#36A2EB",
                                "#FFCE56",
                                "#FF6384",
                                "#36A2EB",
                                "#FFCE56"
                                ],
                                hoverBackgroundColor: [
                                "#FF6384",
                                "#36A2EB",
                                "#FFCE56",
                                "#FF6384",
                                "#36A2EB",
                                "#FFCE56"
                                ]
                            }]
                        };
    
                        var ctx = document.getElementById("{{.ID}}").getContext("2d");
                        var PieChart = new Chart(ctx,{
                            type: 'pie',
                            data: pieData
                        });
                      </script>
        {{end}}        
        {{end}}
        <div class="w-100"></div>
      </div>
    </div>
    
    
    <script>
      
// Data for pie chart

                    
                    
// Data for doughnut chart
                    var doughnutData = {
                        labels: [
                        "Red",
                        "Blue",
                        "Yellow"
                        ],
                        datasets: [
                        {
                            data: [300, 50, 100],
                            backgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                            ],
                            hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                            ]
                        }]
                    };

                    var ctx = document.getElementById("doughnut-graph").getContext("2d");
                    var DoughnutChart = new Chart(ctx, {
                        type: 'doughnut',
                        data: doughnutData,
                        responsive : true
                    });                    
        </script>
  </body>
</html>